1 00:00:00,660 --> 00:00:02,720 Hello and welcome to this lecture. 2 00:00:02,760 --> 00:00:07,860 In this late show we'll will be clearing the ball at the moment. 3 00:00:07,890 --> 00:00:11,800 The ball is leaving a continuous trail. 4 00:00:12,030 --> 00:00:18,720 So we gonna use a method to clear the ball from the canvas each time. 5 00:00:19,860 --> 00:00:23,240 This is what the javascript looks like at the moment. 6 00:00:23,310 --> 00:00:32,450 So we view what the canvas looks like a good run lunch in Chrome and then you can see what the Cumbers 7 00:00:32,470 --> 00:00:38,340 looks like at the moment you can see it's just got drawn a line continuous stood a gate you can see 8 00:00:38,340 --> 00:00:38,880 that. 9 00:00:38,910 --> 00:00:49,170 So at the moment the ball is not is just continuously painting or drawing on each frame that is drawn 10 00:00:49,230 --> 00:00:51,050 on the cup. 11 00:00:51,120 --> 00:00:58,890 So every time a new frame is spent 10 on the canvas that is every time a new frame of the board is painted 12 00:00:58,890 --> 00:01:00,180 on the canvas. 13 00:01:00,240 --> 00:01:05,600 It doesn't remove the previous ones so it creates a continuous trail. 14 00:01:05,610 --> 00:01:06,450 What are we going to do. 15 00:01:06,450 --> 00:01:14,790 There is a method called clear canvas so we are going to use that method to clear the content of the 16 00:01:14,790 --> 00:01:15,460 cover. 17 00:01:15,540 --> 00:01:22,550 The metal squaw clear wrecked the Campbells is obviously looks like a rectangle. 18 00:01:22,740 --> 00:01:29,940 So the clay erect method will treat it as a rectangle. 19 00:01:30,040 --> 00:01:39,450 All right we are going to insert the clairette method just at the beginning of this drill function here 20 00:01:39,840 --> 00:01:48,740 so it'll clear each instance to allow a new instance to be painted on the compass so we do that we have 21 00:01:48,740 --> 00:01:49,770 a clear wrecked 22 00:01:54,000 --> 00:01:56,330 clairette Meter. 23 00:01:57,420 --> 00:02:01,010 Notice the way the method is written. 24 00:02:01,110 --> 00:02:05,180 Lower case and then the first letter of the other word. 25 00:02:05,190 --> 00:02:06,400 It's in upper case. 26 00:02:06,420 --> 00:02:11,710 You can see the format almost identical with the other methods. 27 00:02:11,880 --> 00:02:17,820 So this clairette method takes in four parameters. 28 00:02:17,890 --> 00:02:28,800 Inside this parenthesis for four Param if there's need to go in that the first is the x and y coordinates 29 00:02:29,280 --> 00:02:33,400 of the top left corner of the rectangle. 30 00:02:33,420 --> 00:02:36,660 So the whole canvas is treated as a rectangle. 31 00:02:36,660 --> 00:02:38,190 So the first parameters are going. 32 00:02:38,190 --> 00:02:40,960 There is the x and y coordinates. 33 00:02:41,280 --> 00:02:50,100 Okay off the top left corner of the rectangle and then we have the x and y coordinates on the bottom 34 00:02:50,490 --> 00:02:53,780 right corner of the rectangle. 35 00:02:53,940 --> 00:02:59,040 So the whole area is covered by the rectangle. 36 00:02:59,040 --> 00:03:07,950 So this lace barometers we're pulling here will clear each instance where the board painted the combat 37 00:03:08,100 --> 00:03:11,930 to allow a new one to be painted on. 38 00:03:12,180 --> 00:03:13,700 So let's do that. 39 00:03:13,740 --> 00:03:30,190 So the value I'm going to give is zero for X and then 0 for the Y and then we'll go to campus. 40 00:03:30,710 --> 00:03:38,520 Divide the weight come back with. 41 00:03:41,540 --> 00:03:44,900 Okay so I'll be canvas Don't wait. 42 00:03:45,020 --> 00:03:45,770 Corner. 43 00:03:45,990 --> 00:03:56,920 And then for the Y to be crowned that's not right. 44 00:03:58,790 --> 00:03:59,970 All right. 45 00:04:00,100 --> 00:04:03,940 There we put a semicolon to that. 46 00:04:04,810 --> 00:04:06,690 I forgot to put the ctm. 47 00:04:06,730 --> 00:04:11,530 You need to put a city so that it can reference the the get. 48 00:04:11,560 --> 00:04:15,530 Contest objects for insert any city accept. 49 00:04:16,480 --> 00:04:22,740 So let's go through the four parameters that this clairette method takes. 50 00:04:22,750 --> 00:04:31,680 So the first two here is the x y coordinates so what we value gives them zero. 51 00:04:31,690 --> 00:04:37,900 This is the x and y coordinates of the top left corner of the rectangle. 52 00:04:37,900 --> 00:04:40,730 So the whole canvas is treated as a rectangle. 53 00:04:40,840 --> 00:04:41,920 So there's two values. 54 00:04:41,920 --> 00:04:47,080 We represent the top left hand corner of the rectangle. 55 00:04:47,080 --> 00:04:49,690 The other two value with the canvas don't we. 56 00:04:49,730 --> 00:04:58,600 And the cover stops height will represent the x and y coordinates of the bottom right corner of the 57 00:04:58,600 --> 00:04:59,660 rectangle. 58 00:04:59,890 --> 00:05:04,680 Okay so in this way the whole area of the rectangle is covered. 59 00:05:04,690 --> 00:05:13,720 So any instance of the ball that is painted or drawn on the canvas is cleared before the next frame 60 00:05:13,780 --> 00:05:14,740 is painted on. 61 00:05:14,740 --> 00:05:18,640 So every instance of the canvas is referred to as a frame. 62 00:05:18,640 --> 00:05:24,800 So each frame was each frame is painted on it will be cleared for the next one to be painted on. 63 00:05:24,940 --> 00:05:29,040 And this will happen every ten milli seconds. 64 00:05:29,170 --> 00:05:40,760 So let me say this and then go back and let her run and go by to my index file and go run and launching 65 00:05:40,810 --> 00:05:42,060 Chrome. 66 00:05:42,080 --> 00:05:43,570 Hopefully you see. 67 00:05:43,570 --> 00:05:48,080 You can see that the cassi a ball or the ball is not stain. 68 00:05:48,700 --> 00:05:49,710 You can see that. 69 00:05:49,890 --> 00:05:53,680 Okay go fix that in the next lecture. 70 00:05:53,950 --> 00:06:00,070 So if he can see the continuous trail as stop he just creates a single ball out so you can see the ball 71 00:06:00,120 --> 00:06:03,550 to be moving or do is leaving the camp. 72 00:06:03,580 --> 00:06:08,380 So we are going to fix that in subsequent elections so rather than leave the canvas. 73 00:06:08,380 --> 00:06:14,810 It will bounce off the walls of the canvas so thank you so much for watching this lecture. 74 00:06:14,830 --> 00:06:17,890 Please let me know if you have any questions. 75 00:06:17,890 --> 00:06:18,790 Take care. 76 00:06:18,790 --> 00:06:20,340 Bye for now.